<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>层叠数据选择器</title>
    <link rel="stylesheet" type="text/css" href="../example.css" />
</head>
<body>
<div id="doc4">

  <div class="hd">
    <div class="hd-title">CdSelector example:</div>
更详细的api，请参见 ：<br> <a href="../../jsdoc/symbols/__.widget.CdSelector.html">__.widget.CdSelector.html</a><br>
<a href="../../jsdoc/symbols/__.widget.RegionSelector.html">__.widget.RegionSelector.html</a><br>
  </div>
  <!-- start:bd -->

  <div class="hd">
  <h1>使用必需配置：</h1>
<pre>
<!-- 模块自动loader -->
&lt;script&gt;
//需要load cdselector
__.load(['cdselector'], function() {

  var _ = __._;

  //在这里加入实际的CdSelector初始化代码

});
</pre>
    <h1>日期选择</h1>
    <div id="container0"></div>
    <div id="result0"></div>
    <div>第一个参数是container id, <br>第二个是数据源的object或者一个日期的string，<br>第三个是展现多少级，<br>第四个是render模式（1或2,select 或 ul），<br>第五个是选中值改变时的回叫函数，<br>第六个是一个数组指明每一级是否允许为空(不限)</div>
<pre>
var oDisObj0 = new __.widget.CdSelector(
  'container0', '1988-01-01', 3, 1,
  function(o, ar) {
    _.f('result0').innerHTML = ar.join('-');
  },
  [true, true, false, true]
);
</pre>
    <h1>select的地区选择, 不允许第三级出现不限</h1>
<pre>
//调用方法1，使用 CdSelector, 需要主动加载 'cds_data_region'，不推荐
  var oDisObj1 = new __.widget.CdSelector(
    'container1', __.widget.data.Region, 4, 1,
    function(o, ar) {
      _.f('result1').innerHTML = ar.join('-');
    },
    [true, true, false, true]
  );
</pre>
    <div id="container1"></div>
    <div id="result1"></div>
<pre>
//调用方法2，使用 RegionSelector, 不用主动加载 'cds_data_region'，推荐使用
  var oDisObj1b = new __.widget.RegionSelector(
    'container1b', 4,
    {
      renderType : 1, //default 1
      afterChange : function(o, ar) {
        _.f('result1b').innerHTML = ar.join('-');
      }, //onchage 的回调函数
      jsonName : 'testjn1b', //自动生成json的名字
      limitArray : [false, false, false, true] // allow '不限'
    }
  );
</pre>
    <div id="container1b"></div>
    <div id="result1b"></div>
    <h1>列表的地区选择, 设置为只显示3级</h1>
    <div id="container2"></div>
    <div style="clear:both;"></div>
    <div id="result2"></div>
    <div>提供了select方法可以调用，通常用来设置初始化值</div>
<pre>
  var oDisObj2 = new __.widget.RegionSelector(
    'container2', 3, {
       renderType : 2,
       afterChange : function(o, ar) {
         _.f('result2').innerHTML = ar.join('-');
       }
    }
  );
  oDisObj2.select('1231-1238-1240')
</pre>
    <h1>地区的选择, 同时得到哪一级被点击更新</h1>
    <div id="container3"></div>
    <div style="clear:both;"></div>
    <div id="result3"></div>
<pre>
  var oDisObj4 = new YW.CategorySelector(
    'container4', 2, {
      renderType : 2,
      afterChange : function(level, ar) {
        _.f('result4').innerHTML = ar.join('-') + ', level ' + level + ' is clicked';
      }
    }
  );
</pre>
  </div>
  <!-- end:bd -->
</div>
<script>
__ = {
  cfg : [undefined, true, '0', 'http://localhost/att/workspace/os/svn']
};
</script>
<script src="http://localhost/att/workspace/os/svn/trunk/src/loader/loader.js"></script>
<script>
__.load(['yui core cdselector cds_data_region', 'cdselector_css'], function() {
  var _ = __._;

  var oDisObj0 = new __.widget.CdSelector(
    'container0', '1988-01-01', 3, 1,
    function(o, ar) {
      _.f('result0').innerHTML = ar.join('-');
    }
  );

  var oDisObj1 = new __.widget.CdSelector(
    'container1', __.widget.data.Region, 4, 1,
    function(o, ar) {
      _.f('result1').innerHTML = ar.join('-');
    },
    [false, false, true, true]
  );
  var oDisObj1b = new __.widget.RegionSelector(
    'container1b', 4,
    {
      renderType : 1, //default 1
      afterChange : function(o, ar) {
        _.f('result1b').innerHTML = ar.join('-');
      }, //onchage 的回调函数
      jsonName : 'testjn1b', //自动生成json的名字
      limitArray : [false, false, false, true] // allow '不限'
    }
  );
  //oDisObj1.select('2591-2592-2595-0')

  var oDisObj2 = new __.widget.RegionSelector(
    'container2', 3, {
       renderType : 2,
       afterChange : function(o, ar) {
         _.f('result2').innerHTML = ar.join('-');
       }
    }
  );
  oDisObj2.select('1231-1238-1240')

  var oDisObj3 = new __.widget.RegionSelector(
    'container3', 4, {
      renderType : 2,
      afterChange : function(level, ar) {
        _.f('result3').innerHTML = ar.join('-') + ', level ' + level + ' is clicked';
      }
    }
  );

});
</script>
</body>
</html>
